<template>
	<view>
		<view class="mui-content" id="login_panel" v-if="!isGzh" style="margin-top: 40rpx;">
			<view class="top3">
				<view>
					<input type="text" placeholder="请输入您的手机号" v-model="username" class="ren">
				</view>
				<view>
					<input type="password" placeholder="请输入您的密码" v-model="password" class="suo">
				</view>
			</view>
			<view class="input-box">
				<button class="loginBtn" @click="bangding()" style="letter-spacing:10px;">绑定</button>
			</view>
			<view class="input-box">
				<button class="loginBtn" @click="shenqing()" style="letter-spacing:3px;">申请成为联盟商家</button>
			</view>
		</view>
		<view class="mui-content" id="gzh_panel" v-if="isGzh">
			<view style="width:100%;height:80px;margin-top:50px;">
				<view style="width:80px;height:80px;margin:0 auto;border-radius:80px;overflow:hidden;">
					<img id="head" src="../../static/center/user-photo.png" style="width:100%;height:100%;" />
				</view>
			</view>
			<view style="width:100%;text-align:center;height:30px;line-height:30px;font-size:16px;color:grey;" id="nick">{{gzh.gzhName}}</view>
			<view @click="jiebang()" style="width:200px;height:40px;margin:15px auto;text-align:center;line-height:40px;background:orange;color:white;border-radius:5px;">
				解除绑定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isGzh:false,		//该用户是否为联盟商家
				gzh:{},				//绑定的联盟商家信息
				username:'',		//您的手机号
				password:'',		//密码
			}
		},
		onLoad() {
			this.selectGzh()
		},
		methods: {
			//查询自己是否已经绑定账号
			selectGzh(){
				this.$http.get('/gzh/gzhxcx',{
					userid:uni.getStorageSync('usersId')
				}).then(res => {
					if(res.data.code==200){
						this.isGzh = true;
						this.gzh = res.data.data;
					}else{
						this.isGzh = false;
					}
				})
			},
			//解除绑定
			jiebang(){
				console.log("点击了解除绑定")
				this.$http.get('/gzh/jiebangxcx',{
					userid:uni.getStorageSync('usersId')
				}).then(res => {
					if(res.data.code==200){
						this.$u.toast("解绑成功")
						this.isGzh = false;
					}
				})
			},
			//绑定联盟商家
			bangding(){
				if(this.isNull(this.username)){
					this.$u.toast("手机号不能为空")
					return
				}
				if(this.isNull(this.password)){
					this.$u.toast("密码不能为空")
					return
				}
				this.$http.get('/gzh/loginxcx',{
					username:this.username,
					password:this.password,
					userid:uni.getStorageSync('usersId')
				}).then(res => {
					if(res.data.code==200){
						this.$u.toast("绑定成功");
						this.isGzh = true;
						this.selectGzh();
					}else{
						this.$u.toast(res.data.msg);
						this.isGzh = false;
					}
				})
			},
			//申请成为联盟商家
			shenqing(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'zhuceGzh'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			//判断为空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		}
	}
</script>

<style>
	.top3 {
		width: 90%;
		margin-left: 5%;
	}
	.top {
	    background: #EF6700;
	    width: 90%;
	    height: 45px;
	    color: lightgray;
	    text-align: center !important;
	    margin-top: 8%;
	    margin-left: 5%;
	    font-size: 120%;
	    font-weight: bold;
	    line-height: 40px;
	}
	.input-box{
		margin: 0rpx 20rpx;
		position: relative;
	}
	.input-box .icon{
		position: absolute;
		left: 10rpx;
		top: 20rpx;
		z-index: 100;
	}
	.input-box .input{
		background-color: white;
	}
	.loginBtn{
		width: 92%;
		margin-top: 60rpx;
		background-color: #FF7900;
		color: white;
	}
	.newUser{
		width: 60%;
		margin: auto;
		margin-top: 50rpx;
		color: #3a8ee6;
		display: flex;
		font-size: 37rpx;
		justify-content: space-around;
	}
	.ren{
		border: 0.5rpx #ecdede solid;
		background-color: white;
		height: 50px;
		padding-left: 40px;
		background-image: url(../../static/center/login_name.png);
		background-size: 20px;
		background-repeat: no-repeat;
		background-position-x: 10px;
		background-position-y: 15px;
	}
	.suo{
		border: 0.5rpx #ecdede solid;
		background-color: white;
		height: 50px;
		padding-left: 40px;
		background-image: url(../../static/center/login_password.png);
		background-size: 20px;
		background-repeat: no-repeat;
		background-position-x: 10px;
		background-position-y: 15px;
	}
</style>
